<template>
	<view class="view_main">
		<view class="search_view" style="position: relative;">
			<input type="text" v-model="keyword" @input="search()" focus="true" placeholder="请输入用户名/昵称" placeholder-style="font-size: 27rpx">
			<image src="/static/search.png" style="height: 35rpx; width: 35rpx;position: absolute;top:24rpx; left:50rpx;"></image>
		</view>
		<!-- 查询的用户信息 -->
		<view v-for="u in users" class="users_view">
			<view class="userInfo_view">
				<image :src="$.getImg(u.header)" ></image>
				<view class="view1">
					<text style="font-weight: bold;">{{u.nickname}}</text>
					<view class="sex_view">
						<text>性别：</text>
						<image class="sex" :src="u.sex == 0 ? '/static/man.png' : '/static/woman.png'"></image>
					</view>
				</view>
			</view>
			<view class="button_view">
				<button size="mini" @click="friendRequest(u.id)">添加好友</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				timer: null,
				users: []
			}
		},
		methods: {
			search() {
				if (this.timer) {
					clearTimeout(this.timer);
				}
				
				this.timer = setTimeout(() => {
					this.$.ajax({
						url: '/user/searchUsers',
						data: {
							keyword: this.keyword
						},
						success: (datas) => {
							console.log(datas);
							this.users = datas;
						}
					});
				}, 300);
			},
			friendRequest(tid) {
				uni.navigateTo({
					url: '/pages/firendRequest/firendRequest?tid=' + tid
				})
			}
		}
	}
</script>

<style lang="scss">
	.view_main {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.search_view {
			display: flex;
			width: 100%;
			margin: 40rpx 0;
			
			input {
				width: 90%;
				height: 80rpx;
				padding: 20rpx 60rpx;
				box-sizing: border-box;
				margin: 0 auto;
				border-radius: 43rpx;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			}
		}
		
		.users_view {
			width: 80%;
			padding: 20rpx 40rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			.userInfo_view {
				display: flex;

				.view1 {
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					padding: 10rpx 0;
					box-sizing: border-box;
					justify-content: space-between;
					
					.sex_view {
						display: flex;
						
						.sex {
							width: 50rpx;
							height: 50rpx;
						}
					}
				}
			}

			.button_view {
				button {
					background-color: #00A2FF;
					color: white;
					box-shadow: 10rpx 10rpx 10rpx gray;
				}

				button:active {
					background-color: #3ab4ff;
					position: relative;
					top: 5rpx;
					left: 5rpx;
					box-shadow: 5rpx 5rpx 5rpx gray;
				}
			}
		}
	}
</style>
